<template>
    <div class="inbound-plan-container">
      <!-- 页面内状态提示 -->
      <div  :class="['status-banner']" v-if="banner.visible">
        <span class="status-icon">{{ banner.type === 'success' ? '✅' : banner.type === 'error' ? '❌' : 'ℹ️' }}</span>
        <span>{{ banner.text }}</span>
      </div>
  
      <!-- 入库计划单卡片列表 - 使用van-list实现上拉加载 -->
      <van-list
        v-model:loading="listLoading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoadMore"
        v-if="planList.length > 0"
      >
        <div class="plan-card" v-for="(entry, index) in planList" :key="entry.rowid || index" @click="onPlanCardClick(entry)">
          <div class="card-content">
            <div>
              <div class="plan-name">
              {{ getPart(title, 0) }}
            </div>
              <span class="document-type">
                单据类型：{{ entry['6864a5824e2949f41199067a']  }}
              </span>
            </div>
      
            <div class="plan-info">
              <span class="goods-count">
                {{ getPart(title, 1) }}
              </span>
              <span :class="['sign-status', isSigned(entry['6895a183754ec2b3899ded98']) ? 'status-signed' : 'status-unsigned']">
                 {{ entry['6895a183754ec2b3899ded98'] }}
                </span>
            </div>
          </div>
          <div class="card-actions">
            <van-row gutter="8">
              <van-col span="12">
                <van-button 
                  round 
                  type="primary" 
                  size="small" 
                  block 
                  :disabled="entry['6895a183754ec2b3899ded98'] == '未签到' || entry['689bf561ad18b78d3f356de6'] == '已叫号'"
                  :class="{ 'button-disabled': entry['6895a183754ec2b3899ded98'] == '未签到' || entry['689bf561ad18b78d3f356de6'] == '已叫号' }"
                  @click.stop="handleCallClick(entry, $event)"
                >
                  {{ entry['689bf561ad18b78d3f356de6'] || '未叫号' }}
                </van-button>
              </van-col>
              <van-col span="12">
                <van-button 
                  round 
                  type="success" 
                  size="small" 
                  block 
                  :disabled="entry['6895a183754ec2b3899ded98'] == '已签到'"
                  :class="{ 'button-disabled': entry['6895a183754ec2b3899ded98'] == '已签到' }"
                  @click.stop="handleSignClick(entry, $event)"
                >
                  {{ entry['6895a183754ec2b3899ded98'] }}
                </van-button>
              </van-col>
            </van-row>
          </div>
        </div>
      </van-list>
  
      <!-- 无数据提示 -->
      <div v-else-if="!loading && planList.length === 0" class="no-data">
        <div class="no-data-icon">📭</div>
        <div class="no-data-text">暂无入库计划单数据</div>
      </div>
  
      <!-- 初始加载状态 -->
      <div v-if="loading && planList.length === 0" class="loading">
        <div class="loading-spinner"></div>
        <div class="loading-text">正在加载数据...</div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, computed } from 'vue';
  import { useRouter } from 'vue-router';
  import { api, config, env, md_emitter } from 'mdye';
  import { showConfirmDialog, showToast, showLoadingToast   } from 'vant';
  import axios from 'axios';
  import { cdx } from '../utils/instances';
  import { WORKSHEETS } from '../utils/constant';
  
  const router = useRouter();
  // 响应式数据
  const inventoryPlans = ref([]);  // 收货单数据（主要数据）
  const planMap = ref(new Map());  // 入库计划单映射（key: 计划ID -> 收货单任一条记录）
  const loading = ref(true);
  const count = ref(0);
  const planList = ref([]);
  const  showLoading = ref(false);

  const title = ref('');

  // 新增：分页和加载相关状态
  const listLoading = ref(false);       // 列表加载状态
  const finished = ref(false);          // 是否已加载完所有数据
  const currentPage = ref(1);           // 当前页码
  const pageSize = ref(20);             // 每页数据量

  // 状态提示
  const banner = ref({ visible: false, type: 'info', text: '' });
  const showBanner = (text, type = 'info', duration = 3000) => {
    banner.value = { visible: true, type, text };
    if (duration > 0) {
      setTimeout(() => { banner.value.visible = false; }, duration);
    }
  };

  const getAssociatedData = async (item) => {
    try {
      const res = await cdx.getFilterRows({
        worksheetId: WORKSHEETS.SHOU_HUO,
        filters: [
          {
            controlId: 'rowid',
            dataType: 2,
            spliceType: 1,
            filterType: 2,
            values: JSON.parse( item['6868c649c66aa1c3b15aff29']),
          }
        ]
      });
      console.log('res:', res);
      
      // 添加安全检查
      if (!res  || !Array.isArray(res.rows)) {
        console.warn('getAssociatedData: 返回数据格式异常', res);
        return [];
      }
      
      const arr = res.rows.map(item => {
        return item.rowid
      })
      
      return arr
    } catch (error) {
      console.error('getAssociatedData 调用失败:', error);
      return [];
    }
  }

  const getDocumentType = (type) => {
    // 如果type是字符串，直接返回
    if (typeof type === 'string' && !type.includes('[')) {
      return type;
    }
    
    // 如果type是JSON字符串，解析后取第一个元素
    try {
      const parsed = JSON.parse(type);
      if (Array.isArray(parsed) && parsed.length > 0) {
        const typeId = parsed[0];
        return typeId == '7c685d45-f1c7-4ec9-af9c-9186d3b3ed71' ? '到货入库' : 
               typeId == '2602421a-41c6-4616-9954-d0489c49a63b' ? '客退入库' : '多余退货';
      }
    } catch (e) {
      console.warn('解析单据类型失败:', e);
    }
    
    return '未知类型';
  }
  
  const getPart = (str, index) => {
    if (!str || typeof str !== 'string') {
      return '';
    }
    return str.split('---')[index] || '';
  }

  // 修改：获取入库计划单数据方法，支持分页和追加模式
  const fetchInventoryPlanData = async (pageIndex = 1, isLoadMore = false) => {
    try {
      console.log(`🔍 开始获取入库计划单数据... 页码: ${pageIndex}, 是否加载更多: ${isLoadMore}`);
      console.log('📋 配置信息:', {
        worksheetId: WORKSHEETS.PLAN_INFO,  // 使用入库计划单表ID
        viewId: '',
        appId: config.appId
      });
      
      // 如果不是加载更多，清空旧数据
      if (!isLoadMore) {
        planList.value = [];
        planMap.value.clear();
        currentPage.value = pageIndex;
      }
      
      // 步骤1: 获取入库计划单数据
      console.log('📡 使用插件API获取入库计划单数据...');
      const planResult = await cdx.getFilterRows({
        worksheetId: WORKSHEETS.PLAN_INFO,  // 使用入库计划单表ID
        viewId: '',
        pageIndex: pageIndex,
        pageSize: pageSize.value,
        notGetTotal: false
      });
      
      console.log('📦 入库计划单API返回结果:', planResult);
      
      if (!planResult || planResult.rows.length === 0) {
        console.warn('⚠️ 入库计划单数据获取失败或为空');
        if (isLoadMore) {
          finished.value = true; // 没有更多数据了
        }
        return;
      }

     
      
      // 更新总数
      if (!isLoadMore) {
        count.value = planResult.count;
      }

      console.log('planResult:', planResult);

      // 过滤数据
      const filteredData = planResult.rows.filter(item => {
        return item['6864a5824e2949f411990679'] != '入库完成'
      });

      
      // 根据模式处理数据
      if (isLoadMore) {
        // 加载更多：追加数据
        planList.value.push(...filteredData);
      } else {
        // 刷新：替换数据
        planList.value = filteredData;
      }
      
      // 判断是否还有更多数据
      if (filteredData.length < pageSize.value) {
        finished.value = true;
      } else {
        finished.value = false;
      }
      
      console.log('✅ 数据获取成功，当前共', planList.value.length, '条入库计划单记录');
      console.log('planList:', planList.value);
      
      // 安全地获取title
      if (planList.value.length > 0) {
        try {
          const details = await api.getRowDetail({
            worksheetId: '6864a3b94e2949f41199061e',
            viewId: '',
            rowId: planList.value[0].rowid,
            getTemplate: false
          });
          const rowData = JSON.parse(details.rowData);
          title.value = rowData['68959d33754ec2b3899dec66'] || '';
        } catch (error) {
          console.warn('获取title失败:', error);
          title.value = '';
        }
      }
      
    } catch (error) {
      console.error('❌ 获取入库计划单数据失败:', error);
      if (!isLoadMore) {
        planList.value = [];
        planMap.value.clear();
      }
    }
  };

  // 新增：上拉加载更多处理
  const onLoadMore = async () => {
    try {
      if (finished.value) return;
      
      console.log('📥 开始加载更多数据...');
      
      // 加载下一页数据
      const nextPage = currentPage.value + 1;
      await fetchInventoryPlanData(nextPage, true);
      
      // 更新当前页码
      currentPage.value = nextPage;
      
      console.log('✅ 加载更多完成，当前页码:', currentPage.value);
    } catch (error) {
      console.error('❌ 加载更多失败:', error);
      showToast('加载失败，请重试');
    } finally {
      // 关键修复：确保加载状态被重置
      listLoading.value = false;
    }
  };

  // 初始化数据
  const initData = async () => {
    try {
      loading.value = true;
      console.log('🚀 开始初始化数据...');
      
      // 重置分页状态
      currentPage.value = 1;
      finished.value = false;
      
      await fetchInventoryPlanData(1, false);
      
    } catch (error) {
      console.error('❌ 初始化数据失败:', error);
    } finally {
      loading.value = false;
    }
  };

      // 点击卡片，通知父组件跳转到收货单页面，并传递该计划的所有收货单
      const onPlanCardClick = async (entry) => {
        console.log('entry:', entry);
        
        try {
          if (entry['6895a183754ec2b3899ded98'] != '已签到') {
            showToast('您未签到！');
            return
          }

          if (entry['689bf561ad18b78d3f356de6'] != '已叫号') {
            showToast('您未叫号！');
            return
          }
          console.log('[warehousingEntry] 点击入库计划单卡片:', entry.rowid);
          
          const cleanReceipts = await getAssociatedData(entry);
          console.log('[warehousingEntry] 获取到关联收货单IDs:', cleanReceipts);
          
          if (!cleanReceipts || cleanReceipts.length === 0) {
            console.warn('[warehousingEntry] 未找到关联的收货单数据');
            showBanner('未找到关联的收货单数据', 'error', 3000);
            return;
          }
          
          console.log('[warehousingEntry] 准备跳转到出货单页面，传递数据:', cleanReceipts);
          router.push({ name: 'outbound', state: { receipts: cleanReceipts } });
          
        } catch (error) {
          console.error('[warehousingEntry] 跳转失败:', error);
          showBanner('跳转失败，请稍后重试', 'error', 3000);
        }
      };
  
  
  
       // 是否已签到
       const isSigned = (signed) => {
        // 安全地处理签到状态
        try {
          if (typeof signed === 'string') {
            // 如果是JSON字符串，解析后取第一个元素
            if (signed.includes('[')) {
              const parsed = JSON.parse(signed);
              if (Array.isArray(parsed) && parsed.length > 0) {
                return parsed[0] != '8925128d-fd06-4913-b37a-fac9d3298153';
              }
            }
            // 如果是普通字符串，直接比较
            return signed != '8925128d-fd06-4913-b37a-fac9d3298153';
          }
        } catch (e) {
          console.warn('解析签到状态失败:', e);
        }
        return false;
       };
 
       // 是否已叫号（只有在签到完成后才能叫号）
       const isCalled = (entry) => {
        try {
          const callStatus = entry['689bf561ad18b78d3f356de6'];
          
          // 直接比较字符串，不再需要JSON解析
          return callStatus === '已叫号';
        } catch (e) {
          console.warn('解析叫号状态失败:', e);
        }
        return false;
       };

       // 叫号按钮是否应该被禁用（未签到状态）
       const isCallButtonDisabled = (entry) => {
        // 如果未签到，叫号按钮禁用
        if (!isSigned(entry['6895a183754ec2b3899ded98'])) {
          return true; // 未签到，叫号按钮禁用
        }
        // 已签到但已叫号，叫号按钮禁用
        return isCalled(entry);
       };

       // 签到按钮是否应该被禁用（已签到状态）
       const isSignButtonDisabled = (entry) => {
        return isSigned(entry['6895a183754ec2b3899ded98']); // 已签到则禁用
       };

     
 
              // 点击签到（二次确认）
       const handleSignClick = async (entry, e) => {
         try {
           console.log('开始签到流程，入库计划单:', entry);
           
           // 确保entry是有效对象
           if (!entry || !entry.rowid) {
             console.error('无效的入库计划单数据:', entry);
             showToast('签到失败：无效的数据');
             return;
           }

           console.log('entry:',JSON.parse( entry['6868c649c66aa1c3b15aff29']));
           
           
           const result = await showConfirmDialog({
             title: '确认操作',
             message: '确认对该入库计划单进行签到？',
             confirmButtonText: '确认',
             cancelButtonText: '取消'
           });
           showLoading.value = true;

           showLoadingToast({
              message: '加载中...',
              forbidClick: showLoading.value,
            });

           const url = 'https://www.dachen.vip/api/workflow/hooks/Njg5YmY3YjZjM2FkOTY1Y2IxMWQzY2Iz';
           
  
           // 获取关联的收货单数据
           const rowidArr = await getAssociatedData(entry);
           console.log('获取到关联的收货单IDs:', rowidArr);
           
           if (!rowidArr || rowidArr.length === 0) {
             console.warn('未找到关联的收货单数据');
             showToast('签到失败：未找到关联的收货单数据')
             return;
           }
             
           // 执行签到API调用
           const res = await axios.post(url, rowidArr, {
             headers: { 'Content-Type': 'application/json' }
           });
           
           console.log('签到成功:', res);
           showBanner('签到成功！', 'success', 3000);
           
           // 发出数据更新事件
           md_emitter.emit('inbound-data-updated', {
             type: 'sign',
             planId: entry.rowid,
             timestamp: Date.now()
           });
           
           // 延迟2秒后重新获取数据
           setTimeout(async () => {
             showBanner('正在刷新数据...', 'info', 0);
             await initData();
             showLoading.value = false;
             banner.value.visible = false;
           }, 2000);
           
         } catch (error) {
           console.error('签到处理过程中发生错误:', error);
           
           if (error.response) {
             // API调用失败
             console.error('签到失败:', error.response.data);
             showToast('签到失败，请稍后重试')
           } else if (error.includes('cancel')) {
             // 用户取消操作，这是正常情况
             console.log('用户取消签到操作');
           } else {
             // 其他错误
             console.error('签到失败:', error);
             showToast('签到失败：' + (error.message || '未知错误'))
           }
         }
       };
 
       // 点击叫号（二次确认）
       const handleCallClick = async (entry, e) => {
         try {
           if (isCalled(entry)) return;
           
           await showConfirmDialog({
             title: '确认操作',
             message: '确认对该入库计划单进行叫号？'
           });

           showLoading.value = true;

        showLoadingToast({
             message: '加载中...',
             forbidClick: showLoading.value,
       });

           
           // 这里可以添加实际的叫号逻辑
           const url = 'https://www.dachen.vip/api/workflow/hooks/Njg5YzI3NjhjM2FkOTY1Y2IxMWRjNjgw';
      
           const rowidArr = await getAssociatedData(entry)
           console.log('获取到关联的收货单IDs:', rowidArr);
           
           // 执行签到API调用
           const res = await axios.post(url, rowidArr, {
             headers: { 'Content-Type': 'application/json' }
           });
           // 模拟API调用延迟
           await new Promise(resolve => setTimeout(resolve, 1000));
           
           // 延迟2秒后重新获取数据
           setTimeout(async () => {
             await initData();
           showBanner('叫号成功！', 'success', 3000);
             banner.value.visible = false;
             showLoading.value = false;
           }, 2000);
           
         } catch (error) {
           if (error.response) {
             // API调用失败
             console.error('叫号失败:', error.response.data);
             showToast('叫号失败，请稍后重试')
           } else {
             // 用户取消操作，这是正常情况
             console.log('用户取消叫号操作');
           }
         }
       };
  
  
  // 组件挂载时初始化数据
  onMounted(() => {
    console.log('🎯 组件挂载，开始初始化...');
    initData();
  });
   </script>
  
  <style scoped>
  /* 入库计划单容器 */
  .inbound-plan-container {
    background: #ffffff;
    min-height: 100vh;
    padding: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  
  /* 页面内状态提示 */
  .status-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 16px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
  }
  
  .status-banner .status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
  }
  
  .status-banner.info {
    background: rgba(248, 179, 0, 0.1);
    color: #000000;
    border-color: #f8b300;
  }
  
  .status-banner.info .status-icon {
    background: #f8b300;
    color: #ffffff;
  }
  
  .status-banner.success {
    background: rgba(248, 179, 0, 0.1);
    color: #000000;
    border-color: #f8b300;
  }
  
  .status-banner.success .status-icon {
    background: #f8b300;
    color: #ffffff;
  }
  
  .status-banner.error {
    background: rgba(248, 179, 0, 0.1);
    color: #000000;
    border-color: #f8b300;
  }
  
  .status-banner.error .status-icon {
    background: #f8b300;
    color: #ffffff;
  }
  
  /* 页面标题 */
  .page-header {
    background: #f8b300;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    text-align: center;
    color: #000000;
    box-shadow: 0 8px 32px rgba(248, 179, 0, 0.3);
  }
  
  .header-icon {
    font-size: 32px;
    margin-bottom: 12px;
  }
  
  .header-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
  }
  
  .header-subtitle {
    font-size: 16px;
    opacity: 0.9;
  }
  
  /* 收货单卡片列表 → 改为网格，两列（>=768px），移动端单列，整体更紧凑 */
  .plan-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px; /* 由 32px 缩小 */
  }
  @media (min-width: 768px) {
    .plan-list {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  .plan-card {
    background: white;
    border-radius: 16px; /* 由 24px 缩小 */
    padding: 16px;      /* 由 48px 缩小 */
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-bottom: 12px; /* 由 24px 缩小 */
    min-height: 80px;    /* 由 120px 缩小 */
  }
  
  .plan-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px; /* 由 8px 缩小 */
    background: #f8b300;
  }
  
  .plan-card:hover {
    transform: translateY(-4px); /* 由 -8px 缩小 */
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
  }
  
  .plan-card .card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 50px; /* 由 80px 缩小 */
  }
  
  .plan-name {
    font-size: 18px;   /* 由 36px 缩小 */
    font-weight: 700;
    color: #000000;
    line-height: 1.25;
  }
  
  .plan-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px; /* 由 16px 缩小 */
  }
  
  .goods-count {
    color: #000000;
    font-size: 14px;   /* 由 28px 缩小 */
    font-weight: 600;
  }

  .document-type {
    color: #000000;
    font-size: 13px;
    font-weight: 500;
    background: rgba(248, 179, 0, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #f8b300;
  }
  
  .sign-status {
    padding: 8px 16px; /* 由 16px 32px 缩小 */
    border-radius: 20px; /* 由 30px 缩小 */
    font-size: 12px;     /* 由 24px 缩小 */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px; /* 由 1px 略微收紧 */
  }
  
  .status-signed {
    background-color: rgba(248, 179, 0, 0.1);
    color: #000000;
    border: 2px solid #f8b300;
    opacity: 0.7;
  }
  
  .status-unsigned {
    background-color: rgba(248, 179, 0, 0.2);
    color: #000000;
    border: 2px solid #f8b300; /* 由 3px 缩小 */
  }
 
  .card-actions {
    margin-top: 12px;
  }
  
  /* 收货单页面样式（保持不变） */
  .receipt-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    z-index: 1000;
    overflow-y: auto;
  }
  
  .receipt-header {
    background: #f8b300;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #000000;
    position: sticky;
    top: 0;
    z-index: 1001;
  }
  
  .back-button {
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    color: #000000;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
  }
  
  .back-button:hover {
    background: rgba(0, 0, 0, 0.2);
  }
  
  .back-icon {
    font-size: 18px;
  }
  
  .receipt-title {
    font-size: 20px;
    font-weight: 700;
  }
  
  .receipt-content {
    padding: 20px;
  }
  
  /* 主要信息块样式 */
  .main-info-block {
    background: #f8b300;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 8px 32px rgba(248, 179, 0, 0.3);
    color: #000000;
    position: relative;
    overflow: hidden;
  }
  
  .main-info-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 100%);
    pointer-events: none;
  }
  
  .block-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
  }
  
  .header-icon {
    font-size: 24px;
    margin-right: 12px;
  }
  
  .header-title {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
  }
  
  .info-content {
    position: relative;
    z-index: 1;
  }
  
  .info-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px 0;
  }
  
  .info-label {
    color: rgba(0, 0, 0, 0.8);
    font-size: 14px;
    font-weight: 500;
  }
  
  .info-value {
    color: #000000;
    font-size: 16px;
    font-weight: 600;
  }
  
  .quantity-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .quantity-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .quantity-label {
    color: rgba(0, 0, 0, 0.8);
    font-size: 12px;
    margin-bottom: 4px;
  }
  
  .quantity-value {
    color: #000000;
    font-size: 20px;
    font-weight: 700;
  }
  
  /* 任务块样式 */
  .task-block {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .task-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #f8b300;
  }
  
  .task-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  }
  
  .task-block .block-header {
    margin-bottom: 16px;
  }
  
  .task-block .header-icon {
    font-size: 20px;
    margin-right: 10px;
  }
  
  .task-block .header-title {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
  }
  
  .task-content {
    position: relative;
    z-index: 1;
  }
  
  .task-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px 0;
  }
  
  .task-label {
    color: #000000;
    font-size: 14px;
    font-weight: 500;
  }
  
  .task-value {
    color: #000000;
    font-size: 16px;
    font-weight: 600;
  }
  
  /* 无数据提示 */
  .no-data {
    text-align: center;
    padding: 80px 20px;
    color: #000000;
  }
  
  .no-data-icon {
    font-size: 64px;
    margin-bottom: 24px;
    opacity: 0.6;
  }
  
  .no-data-text {
    font-size: 24px;
    font-weight: 600;
  }
  
  /* 加载状态 */
  .loading {
    text-align: center;
    padding: 80px 20px;
    color: #000000;
  }
  
  .loading-spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #e2e8f0;
    border-top: 6px solid #f8b300;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 24px;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  .loading-text {
    font-size: 20px;
    font-weight: 600;
  }
  
  /* 移动端响应式调整（匹配新的紧凑基准） */
  @media (max-width: 768px) {
    .inbound-plan-container {
      padding: 16px;
    }
    
    .page-header {
      padding: 24px;
      margin-bottom: 16px;
    }
    
    .header-title {
      font-size: 22px;
    }
    
    .plan-card {
      padding: 12px;
      margin-bottom: 10px;
      min-height: 72px;
      border-radius: 14px;
    }
    
    .plan-name {
      font-size: 16px;
    }
    
    .goods-count {
      font-size: 13px;
    }
    
    .sign-status {
      padding: 8px 14px;
      font-size: 12px;
    }
  }
  
  /* 平板端样式 */
  @media (min-width: 769px) and (max-width: 1024px) {
    .inbound-plan-container {
      padding: 20px;
      max-width: 900px; /* 放宽使两列更自然 */
      margin: 0 auto;
    }
  }
  
  /* 桌面端样式 */
  @media (min-width: 1025px) {
    .inbound-plan-container {
      padding: 24px;
      max-width: 1100px; /* 放宽使两列更自然 */
      margin: 0 auto;
    }
    
    .page-header {
      padding: 28px;
    }
    
    .header-title {
      font-size: 26px;
    }
  }
  </style>
  